<template>
    <el-row :gutter="20" class="mt-5">
        <el-col :span="3" :offset="0" v-for="(item,index) in iconNavs" :key="index">
            <el-card shadow="hover" @click="$router.push(item.path)">
                <div class="flex flex-col items-center justify-center cursor-pointer">
                    <el-icon :size="16" :class="item.color">
                        <component :is="item.icon"/>
                    </el-icon>
                    <span class="text-sm mt-2">{{ item.title }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup>

const iconNavs = [
        {
            icon:"list",
            color:"text-light-blue-500",
            title:"课程",
            path:"/course/courseList"
        },
        {
            icon:"ticket",
            color:"text-violet-500",
            title:"考试",
            path:"/exam/examList"
        },
        {
            icon:"histogram",
            color:"text-fuchsia-500",
            title:"成绩",
            path:"/score/scoreList"
        },
        {
            icon:"tickets",
            color:"text-teal-500",
            title:"题库",
            path:"/question/questionList"
        },
        {
            icon:"scale-to-original",
            color:"text-rose-500",
            title:"班级",
            path:"/class/classList"
        },
        {
            icon:"document",
            color:"text-green-500",
            title:"资源",
            path:"/file/filesList"
        },
        {
            icon:"Message",
            color:"text-grey-500",
            title:"通知",
            path:"/announce/receiveAnnounceList"
        },
        {
            icon:"printer",
            color:"text-yellow-500",
            title:"归档",
            path:"/print/printList"
        }
    ]
</script>
